<template>
	<view class="ddd">
		<view class="dd">
			<view>
				<image src="@/static/image/log.png" style="width: 350rpx; height: 340rpx;" class="d1"></image>
			</view>
			<view v-if="changeLogin">
				<button class="wx" @click="login">微信授权登录</button>
			</view>
			<view v-else>
				<!-- 管理员登录表单 -->
				<view>
					<uni-easyinput prefixIcon="contact" :inputStyle="{ borderRadius: '150px' }"
						v-model="loginData.usname" placeholder="请输入管理员用户名" />
				</view>
				<view class="mi">
					<uni-easyinput prefixIcon="locked" type="password" v-model="loginData.password"
						placeholder="请输入管理员密码" />
				</view>
				<view class="lu">
					<button class="deng" @click="adminLogins">管理员登录</button>
				</view>

				<label style="margin-left: -90rpx;">
					<checkbox style="transform: scale(0.7)" /><text style="font-size: 20rpx;">记住密码</text>
				</label>
			</view>

			<view class="dd">
				<text>——其他方式登录——</text>
				<button class="button2" @click="toggleLogin">{{ changeLogin ? '管理员登录' : '微信登录' }}</button>
			</view>
			<view>
				<view class="tips">
					<checkbox style="transform: scale(0.7)" :checked="isAgree" @click="changeAgree" />
					<label style="margin-left: -10rpx;">
						<text style="font-size: 20rpx;">登录/注册即视为你同意<text style="color: #0066cc;"
								@click="tiaokuan()">《服务条款》</text>和<text style="color: #0066cc;"
								@click="yinsi()">《隐私协议》</text></text>
					</label>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		http
	} from '/until/request.js'
	import {
		useTokenStore
	} from '../../../store/token'; //导入pinia对象
	const isAgree = ref(false) //定义单选值
	// 定义微信小程序的对象值
	const userInfo = ref({
		avatarUrl: '',
		nickName: '',
		openId: ''
	})
	const loginData = ref({})
	// 改变单选框的值
	const changeAgree = () => {
		isAgree.value = !isAgree.value
	}
	const userid = ref(); //定义的用户id
	const changeLogin = ref(true); //选择的是否为登录或者微信登录true默认为微信登录
	const usname = ref(''); //定义用户名的初始值
	const password = ref(''); //定义密码的初始值
	const toggleLogin = () => {
		changeLogin.value = !changeLogin.value;
	};
	const usetoken = useTokenStore()
	// 微信授权登录
	const login = () => {
		if (isAgree.value == false) {
			uni.showModal({
				title: '温馨提示',
				content: '请先同意用户协议',
				showCancel: false
			})
			return
		} else {
			uni.showModal({
				mask: true,
				title: '温馨提示',
				content: '授权微信登录后才能正常使用小程序功能',
				success(res) {
					if (res.confirm) {
						uni.getUserProfile({
							desc: '获取你的昵称，头像',
							success(userRes) {
								if (userRes.userInfo != undefined) {
									userInfo.value = userRes.userInfo
									uni.login({
										provider: 'weixin',
										success(loginAuth) {
											uni.setStorageSync('usname', 'manager');
											let result = getData(loginAuth)
											console.log(result)
											if (result) {
												uni.showToast({
													title: '登录成功',
													icon: 'success', // 设置图标类型，可选值为 "success", "loading" 或者不设置
													duration: 2000 // 持续时间，默认是1500ms
												});
												uni.reLaunch({
													url: '/pages/businessman/fenlei/fenlei'
												});
											} else {
												uni.showToast({
													title: '登录失败',
													icon: 'error   ', // 设置图标类型，可选值为 "success", "loading" 或者不设置
													duration: 2000 // 持续时间，默认是1500ms
												});
											}
										}
									})
								} else {
									uni.showToast({
										icon: 'none',
										title: '获取失败，请重试'
									})
								}

							}
						})
					}
				}
			})
		}
	};
	// 微信授权
	const getData = async (loginAuth) => {
		// console.log("loginAuth:" + loginAuth.code)
		let res = await http({
			method: 'get',
			url: '/login/getOpenId?code=' + loginAuth.code
		})
		userInfo.value.openId = res
		console.log("登录返回的对象")
		console.log(res.data)//登录带回来的对象  openID  userid 记得存入pinia
		
		userid.value = res.data.uid//存入数据模型中
		
		console.log(userid.value)
		usetoken.setToken(res.data)//存入pinia
		console.log("pinia存放的用户审核id")
		console.log(usetoken.token.reviewStatus)
	}
	// 条款
	const tiaokuan = () => {
		uni.navigateTo({
			url: '/pages/pub/tiaokuan/tiaokuan'
		})
		// 模拟跳转到服务条款页面
	};
	// 隐私
	const yinsi = () => {
		uni.navigateTo({
			url: '/pages/pub/yinsi/yinsi'
		})
		// 模拟跳转到隐私协议页面
	};
	// 管理员
	const adminLogins = async () => {
		// 获取用户名和密码
		const {
			usname,
			password
		} = loginData.value;

		// 进行非空校验  
		if (!usname) {
			uni.showToast({
				title: '用户名不能为空',
				icon: 'none'
			});
			return;
		}
		if (!password) {
			uni.showToast({
				title: '密码不能为空',
				icon: 'none'
			});
			return;
		}
		// 调转后端接口
		if (isAgree.value == false) {
			uni.showModal({
				title: '温馨提示',
				content: '请先同意用户协议',
				showCancel: false
			})
			return
		} else {
			const res = await http({
				url: '/user/login',
				method: 'get',
				data: {
					usname: loginData.value.usname,
					password: loginData.value.password
				}
			})
			uni.setStorageSync('usname', loginData.value.usname);
			if (res.data) {
				uni.showToast({
					title: '登录成功',
					icon: 'success', // 设置图标类型，可选值为 "success", "loading" 或者不设置
					duration: 2000 // 持续时间，默认是1500ms
				});
				uni.reLaunch({
					url: '/pages/supplier/wjk/catetory'
				});

			}
		}

	};
</script>

<style lang="scss">
	.mi {
		margin-top: 40rpx;
	}

	.lu {
		margin-top: 50rpx;
	}

	.d {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 70rpx;
		font-size: 50rpx;
	}

	.deng {
		width: 500rpx;
		height: 70rpx;
		border-radius: 10rpx;
		background: linear-gradient(to right, #0496d9, #0496d9);
		color: white;
		font-size: 35rpx;
		box-shadow: 2rpx 2rpx 6rpx rgba(0, 0, 0, 0.2);
		box-shadow: inset 0 -2rpx 0 rgba(0, 0, 0, 0.1), 2rpx 2rpx 6rpx rgba(0, 0, 0, 0.2);
		text-shadow: 1rpx 1rpx 2rpx rgba(0, 0, 0, 0.2);
		transition: background 0.3s ease, transform 0.3s ease;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		&:hover {
			transform: scale(1.05);
			background: linear-gradient(to right, #0496d9, #0496d9);
		}

		&:active {
			transform: scale(0.95);
			background: #005bb5;
		}
	}

	.ddd {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;

		.dd {
			width: 80%;
			height: 700rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;
			margin-top: 28rpx;

			.wx {
				width: 350rpx;
				height: 100rpx;
				border-radius: 45rpx;
				background: linear-gradient(to right, #0496d9, #0496d9);
				color: white;
				font-size: 35rpx;
				box-shadow: 2rpx 2rpx 6rpx rgba(0, 0, 0, 0.2);
				box-shadow: inset 0 -2rpx 0 rgba(0, 0, 0, 0.1), 2rpx 2rpx 6rpx rgba(0, 0, 0, 0.2);
				text-shadow: 1rpx 1rpx 2rpx rgba(0, 0, 0, 0.2);
				transition: background 0.3s ease, transform 0.3s ease;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				&:hover {
					transform: scale(1.05);
					background: linear-gradient(to right, #0496d9, #0496d9);
				}

				&:active {
					transform: scale(0.95);
					background: #005bb5;
				}
			}

			.button {
				width: 100%;
			}

			.button2 {
				margin-top: 25rpx;
				width: 200rpx;
				height: 50rpx;
				border-radius: 10rpx;
				background: linear-gradient(to right, #0496d9, #0496d9);
				color: white;
				font-size: 28rpx;
				box-shadow: 2rpx 2rpx 6rpx rgba(0, 0, 0, 0.2);
				box-shadow: inset 0 -2rpx 0 rgba(0, 0, 0, 0.1), 2rpx 2rpx 6rpx rgba(0, 0, 0, 0.2);
				text-shadow: 1rpx 1rpx 2rpx rgba(0, 0, 0, 0.2);
				transition: background 0.3s ease, transform 0.3s ease;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				&:hover {
					transform: scale(1.05);
					background: linear-gradient(to right, #0496d9, #0496d9);
				}

				&:active {
					transform: scale(0.95);
					background: #005bb5;
				}
			}
		}

		.tips {
			position: absolute;
			bottom: 80rpx;
			left: 20rpx;
			right: 20rpx;
			font-size: 22rpx;
			color: black;
			text-align: center;

			.check {
				margin-left: -15rpx;
			}
		}
	}
</style>